<div class='card'>
  <div class='card-header'>
    {{pageTitle}}
  </div>
  <div class='card-body'>
    <div class='row'>
      <div class='col-md-2'>Filter by:</div>
      <div class='col-md-4'>
        <input type='text'
               [(ngModel)]='listFilter' />
      </div>
    </div>
    <div class='row'
         *ngIf='listFilter'>
      <div class='col-md-6'>
        <h4>Filtered by: {{listFilter}}</h4>
      </div>
    </div>
    <div class='table-responsive'>
      <table class='table'
             *ngIf='products.length'>
        <thead>
          <tr>
            <th>
              <button class='btn btn-primary'
                      (click)='toggleImage()'>
                {{showImage ? 'Hide' : 'Show'}} Image
              </button>
            </th>
            <th>Product</th>
            <th>Code</th>
            <th>Available</th>
            <th>Price</th>
            <th>5 Star Rating</th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor='let product of filteredProducts'>
            <td>
              <img *ngIf='showImage'
                   [src]='product.imageUrl'
                   [title]='product.productName'
                   [style.width.px]='imageWidth'
                   [style.margin.px]='imageMargin'>
            </td>
            <td>
              <a [routerLink]="['/products', product.productId]">
                {{ product.productName }}
              </a>
            </td>
            <td>{{ product.productCode | lowercase | convertToSpaces:'-' }}</td>
            <td>{{ product.releaseDate }}</td>
            <td>{{ product.price | currency:'USD':'symbol':'1.2-2' }}</td>
            <td>
              <pm-star [rating]='product.starRating'
                       (ratingClicked)='onRatingClicked($event)'>
              </pm-star>
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</div>
<div *ngIf='errorMessage'
     class='alert alert-danger'>
  Error: {{ errorMessage }}
</div>